<template>
  <div class="main register-container">
    <el-card class="register-card">
      <h3 class="register-title">用户注册</h3>
      <el-form
        ref="registerForm"
        :model="registerForm"
        :rules="registerRules"
        label-width="80px"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input
            v-model="registerForm.nickname"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请确认密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
        <p @click="logFn" class="logFn">已有账号？请登录</p>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { regApi } from "../utils/api";
export default {
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        nickname: "", // 添加昵称字段
      },
      registerRules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "用户名只能包含数字或数字字母组合，不能有中文",
            trigger: "blur",
          },
        ],
        nickname: [
          // 昵称的验证规则
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error("两次输入的密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // 注册逻辑，可以通过调用接口等方式实现
          regApi({
            username: this.registerForm.username,
            password: this.registerForm.password,
            nickname: this.registerForm.nickname, // 传递昵称字段
          }).then((res) => {
            console.log(res);
          });
          // 成功注册后，进行跳转或其他操作
          this.$message.success("注册成功");
          // 路由跳转到登录
          this.$router.push("/login");
        } else {
          this.$message.error("表单验证失败，请检查输入");
        }
      });
    },
    logFn() {
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.main {
  background: pink;
  background-image: url("../assets/bglogin.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
}
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.register-card {
  width: 400px;
  padding: 20px;
}

.register-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.logFn {
  color: #409eff;
  cursor: pointer;
}
</style>
